import { useSelector, useDispatch } from 'react-redux';
import { TodoItem } from './TodoItem';
import { toggleAll } from '../store/actions/todos';

export const TodoMain = () => {
  // 创建 action 分发器
  const dispatch = useDispatch();

  // 导入 redux 中的数据
  const list = useSelector((state) => state.todos);
  // 判断是否全部完成
  const isAllChecked = list.every((item) => item.done);

  return (
    <section className="main">
      <input
        id="toggle-all"
        className="toggle-all"
        type="checkbox"
        checked={isAllChecked}
        onChange={() => dispatch(toggleAll(!isAllChecked))}
      />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {list.map((item) => (
          <TodoItem key={item.id} {...item} />
        ))}
      </ul>
    </section>
  );
};
